<template>
  <div class="notice">
    <yn-common-title name="视频预告" @link="link">
      <!-- <div slot="right" v-if="list.length>0">{{list[0].toDay}}</div> -->
    </yn-common-title>
    <div class="swiper" v-show="list.length > 0">
      <el-carousel
        height="150px"
        :interval="3000"
        ref="carousel"
        :autoplay="!autoplay"
        :arrow="!autoplay ? 'always' : 'never'"
        :loop="!autoplay"
        indicator-position="none"
        @change="carouselChange"
      >
        <el-carousel-item v-for="item in list" :key="item.id">
          <img
            :src="item.wholeCoverPath"
            @error="$fn.imageHandler(item.wholeCoverPath, $event)"
          />
          <div class="box" @click="link(item.channelId)">
            <p class="teacherName">{{ item.teacherName }}</p>
            <p class="channelName">{{ item.channelName }}</p>
            <p class="day">{{ item.day }}</p>
            <p class="time">{{ item.beginTime }}-{{ item.endTime }}</p>
            <span :class="'status status' + item.status"></span>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div
        class="swiper-pagination"
        v-show="list.length > 0 && !list[0].status"
      >
        <span class="swiper-pagination-current">{{ current }}</span> /
        <span class="swiper-pagination-total">{{ list.length }}</span>
      </div>
      <!-- <div class="swiper-button-prev"></div> -->
      <!--左箭头-->
      <!-- <div class="swiper-button-next"></div> -->
      <!--右箭头-->
    </div>

    <div class="contents" v-show="list.length == 0">
      <img
        :src="PIC_URL + '/tlbypcWeb/home/zwyg.jpg'"
        alt=""
        @error="$fn.imageHandler(path + '/client/home/images/zwyg.jpg', $event)"
      />
    </div>
  </div>
</template>
<script>
import title from "../common/title";
import { CLIENT } from "@/common/const";
import { getUrlParams } from "../../script/utils";
// import format from "date-fns/format";
import dayjs from "dayjs";
import {
  getMarketLivelist,
  queryShowYeMarketChargeLiveList,
} from "../../api/index";
export default {
  data() {
    return {
      list: [],
      path: CLIENT,
      current: "",
      autoplay: true,
    };
  },
  components: { "yn-common-title": title },
  mounted() {
    const { version } = getUrlParams();
    if (version >= 1) {
      return this.chargeMarketLiveList();
    }
    this.freeMarketLiveList();
  },
  methods: {
    imageHandler(imgPath, e) {
      const img = e.srcElement;
      img.src = imgPath;
    },
    carouselChange(num) {
      this.current = num + 1;
    },
    link(id) {
      id = typeof id == "string" ? id : "";
      const { version } = getUrlParams();
      const freeUrl = `${CLIENT}/client/liveOff.htm?playId=${id}`;
    //   const chargeUrl = `${CLIENT}//client/toLiveVip.htm?playId=${id}`;
      const chargeUrl = `${CLIENT}/webclient/experience/index.html#/videoList?playId=${id}`;
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"video","data":{"url":"${
          version == 1 ? chargeUrl : freeUrl
        }"}}]`
      );
    },
    async freeMarketLiveList() {
      await getMarketLivelist().then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const self = this;
          if (data.length == 0) {
            return (this.list = []);
          }
          this.list = data.map((item) => {
            item.toDay = dayjs(new Date(item.beginTime)).format("MM-DD");
            item.day = dayjs(new Date(item.beginTime)).format("MM月DD日");
            item.beginTime = dayjs(new Date(item.beginTime)).format("HH:mm");
            item.endTime = dayjs(new Date(item.endTime)).format("HH:mm");
            return item;
          });
          this.autoplay = data[0].status;
          if (data[0].status) {
            this.$refs.carousel.setActiveItem(0);
          }
        }
      });
    },
    async chargeMarketLiveList() {
      const { token } = getUrlParams();
      const self = this;
      await queryShowYeMarketChargeLiveList({
        productId: window.localStorage.getItem("productId"),
        clientCentralToken: token,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          if (data.length == 0) {
            return (this.list = []);
          }
          this.list = data.map((item) => {
            item.toDay = dayjs(new Date(item.beginTime)).format("MM-DD");
            item.day = dayjs(new Date(item.beginTime)).format("MM月DD日");
            item.beginTime = dayjs(new Date(item.beginTime)).format("HH:mm");
            item.endTime = dayjs(new Date(item.endTime)).format("HH:mm");
            return item;
          });
          this.autoplay = data[0].status;
          if (data[0].status) {
            this.$refs.carousel.setActiveItem(0);
          }
        }
      });
    },
  },
};
</script>
<style>
.swiper-pagination-current {
  font-size: 18px;
}
.el-carousel__arrow,
.el-carousel__arrow:hover {
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
[class*=" el-icon-"],
[class^="el-icon-"] {
  font-size: 16px;
}
@media (min-width: 1485px) {
  .el-carousel__item img {
    width: 100%;
  }
}
@media (max-width: 1485px) {
  .el-carousel__item img {
    height: 100%;
  }
}
</style>
<style scoped lang="scss">
.notice {
  background: #090910;
}
.swiper {
  position: relative;
  margin: 20px 0 20px 20px;
  .swiper-pagination {
    color: #f7f9ff;
    text-align: right;
    width: 100%;
    position: absolute;
    top: 16px;
    z-index: 2;
    padding-right: 21px;
    box-sizing: border-box;
  }
  .box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 20px 74px;
    box-sizing: border-box;

    .teacherName {
      color: #d3b56f;
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    .channelName {
      font-size: 20px;
      font-weight: 400;
      color: #fff;
      margin-bottom: 10px;
    }
    .day {
      font-size: 18px;
      font-weight: 400;
      color: #fff;
      margin-bottom: 10px;
    }
    .time {
      font-size: 18px;
      color: #fff;
      font-weight: 400;
    }
    .status {
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-block;
    }
    .status0 {
      width: 102px;
      height: 28px;
      background: url($PIC_URL + "tlbypcWeb/home/wei_kai_shi.png") no-repeat;
    }
    .status1 {
      width: 100px;
      height: 28px;
      background: url($PIC_URL + "tlbypcWeb/home/zbz.gif") no-repeat;
    }
  }
}
.contents {
  img {
    width: 100%;
    margin: 20px 0 20px 20px;
  }
}
.name {
  margin-left: 20px;
  width: 123px;
  .nowNo {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
  }
  h1 {
    color: #bcbfc4;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  h2 {
    font-size: 22px;
    color: #bcbfc4;
  }
}
.indicate {
  margin-left: 10px;
}
</style>
